<template>
  <div class="revset">
    <a-layout>
      <PageHeader @back="$router.go(-1)" subTitle="返回"> </PageHeader>
      <!-- 城市和方案名称编辑 -->
      <a-row style="margin-top: 30px">
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="参保城市" required>
              <city :default-value="socCity" :level="2" @change="handleCity($event)" />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="方案名称" required>
              <a-input v-model="progName" placeholder="请填写" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="缴费日期">
              <a-input-number
                v-model="deductionsDate"
                placeholder="每月扣费日期"
                :min="1"
                :max="31"
                @change="(value) => handleDefault(value)"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="服务费">
              <a-input-number v-model="servercost" placeholder="每月服务费" :min="0" :max="99999999" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="社保账号">
              <SelectWithInputAdd v-model="socAccount" allowClear editable placeholder="社保账号" dictCode="1220" />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="医保账号">
              <SelectWithInputAdd v-model="meAccount" allowClear editable placeholder="医保账号" dictCode="1221" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="7" :offset="3">
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="公积金账号">
              <SelectWithInputAdd v-model="pfAccount" allowClear editable placeholder="公积金账号" dictCode="1222" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <!-- tabs切换 -->
      <a-tabs v-model="onlyAmount">
        <a-tab-pane :key="0" tab="设置参保基数和比例">
          <shebao-table
            v-on:showMenu="showMenu"
            ref="bili"
            :prog-id="progId"
            :prog-name="progName"
            :soc-city-name="socCityName"
            :soc-city="socCity"
            :deductionsDate="deductionsDate"
            :servercost="servercost"
            :socAccount="socAccount"
            :meAccount="meAccount"
            :pfAccount="pfAccount"
          />
        </a-tab-pane>
        <a-tab-pane :key="1" tab="仅设置参保金额">
          <only-amount-table
            ref="guding"
            v-on:showMenu="showMenu"
            :prog-id="progId"
            :prog-name="progName"
            :soc-city-name="socCityName"
            :soc-city="socCity"
            :deductionsDate="deductionsDate"
            :servercost="servercost"
            :socAccount="socAccount"
            :meAccount="meAccount"
            :pfAccount="pfAccount"
          />
        </a-tab-pane>
      </a-tabs>
      <div
        v-if="showBackground"
        style="width: 100%; height: 100%; position: absolute; z-index: 900; background-color: #00000000"
        @click="hideMenu"
      ></div>
    </a-layout>
  </div>
</template>

<script>
import { findSocProgRelation } from "@/api/shebao/shebaoMethod.js";
import { AreaPicker as city } from "xqjr-plugin-common";
import shebaoTable from "./shebaoTable";
import onlyAmountTable from "./onlyAmountTable";
import { isContainByString } from "@/utils/index";
import SelectWithInputAdd from "xqjr-plugin-form/components/XqSelectWithInputAdd.vue";

export default {
  components: {
    city,
    shebaoTable,
    onlyAmountTable,
    SelectWithInputAdd
  },
  data() {
    return {
      socAccount: undefined,
      meAccount: undefined,
      pfAccount: undefined,
      isContainByString,
      showBackground: false,
      progId: "",
      progName: "",
      deductionsDate: 1,
      servercost: 0,
      onlySocAmount: false,
      socCityName: "",
      socCity: "",
      onlyAmount: 0
    };
  },

  created() {
    if (this.$route.query.id) {
      this.progId = this.$route.query.id;
      this.toInquire();
    }
  },
  methods: {
    hideMenu() {
      this.showBackground = false;
      if (this.onlyAmount === 0) {
        this.$refs.bili.hideItemShow();
      } else {
        this.$refs.guding.hideItemShow();
      }
    },
    showMenu() {
      this.showBackground = true;
    },
    // 处理城市
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        } else if (label.length && label.length === 1) {
          this.socCityName = label[0];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    // 查询方案详情
    toInquire() {
      findSocProgRelation({
        progId: this.progId,
        companyId: this.isContainByString("contractAdmin") ? "0" : this.$store.state.hr.companyId
      }).then((res) => {
        this.progName = res.data.progName;
        this.socCityName = res.data.socCityName;
        this.socCity = res.data.socCity.toString();
        this.onlySocAmount = res.data.onlySocAmount;
        this.onlyAmount = Number(res.data.onlySocAmount);
        this.deductionsDate = res.data.deductionsDate;
        this.servercost = res.data.serviceCost;
        this.socAccount = res.data.socAccount;
        this.meAccount = res.data.meAccount;
        this.pfAccount = res.data.pfAccount;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.revset {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #fff;
}
.header-title {
  display: flex;
  height: 30px;
  padding-top: 3px;
  padding-top: 5px;
  margin-top: 24px;
  margin-bottom: 24px;
  // background: #fa2855;
  .title-info {
    font-size: 16px;
    color: #252525;
    width: 200px;
    height: 22px;
    margin-right: 10px;

    padding-left: 15px;
  }
  .title-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;
    background-color: var(--primary);
  }
}
.header-title-box {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.totalBox {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-top: 30px;

  .company {
    margin-right: 24px;
  }
  .shebaoTotal {
    margin-right: 24px;
  }
  .text {
    font-size: 14px;
  }
  .number {
    color: var(--primary);
    font-size: 14px;
  }
}
.submit-btn {
  display: flex;
  justify-content: center;
  button {
    margin-right: 10px;
  }
}

.addCursor {
  cursor: pointer;
}

.checkboxWrapper {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  width: 150px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  padding: 10px 0 10px 10px;
}
</style>
